<script setup>
import {
  ref,
  reactive,
  onMounted,
  computed
} from 'vue'
import http from '@/utils/axios.js'
import utils from '@/utils/tree.js'
const data = reactive({
  list: []
});

function getData(pid, node) {
  let url = 'app/pan/dir/select'
  return http.get(url, { params: { pid } }).then(res => {
    if (node) {
      return res
    }
  })
}
const props = ref({
  label: 'title',
  isLeaf: function (data, node) {
    return data.is_dir === 0
  }
})
const list = computed(() => {
  return data.list
})
const treeRef = ref()

function onNodeClick(data, node, e) {
  console.log(data, node, e)
}
function onNodeContextmenu(event, data, node, tree) {
  console.log(event, data, node, tree)
}

function loadNode(node, resolve) {
  getData(node.data.id || 0, 1).then(res => {
    resolve(res.list || [])
  })
}
</script>

<template>
  {{ data }}
  <el-tree ref="treeRef" :data="list" node-key='fs_id' :props="props" :load="loadNode" lazy :height="208"
    @node-contextmenu='onNodeContextmenu' @node-click="onNodeClick" highlight-current>
    <template #default="{ node }">
      <el-icon v-if='node.data.is_dir'>
        <Folder />
      </el-icon>
      <el-icon v-else>
        <DocumentRemove />
      </el-icon>
      <span>{{ node.label }}</span>

    </template>
  </el-tree>
</template>

<style scoped></style>